<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小兔鲜儿</title>
  <link rel="stylesheet" href="../css/personal.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../lib/iconfont/iconfont.css">
  <!-- 引入header相关的 -->
  <link rel="stylesheet" href="../css/header.css">
  <script src="../js/header.js"></script>
</head>

<body>
  <!-- 头部导航 -->
  <header>
    <div class="w">
      <ul>
        <li><a href="javascript:;">请先登录</a></li>
        <li></li>
        <li><a href="javascript:;">免费注册</a></li>
        <li></li>
        <li><a href="../html/orders.html">我的订单</a></li>
        <li></li>
        <li><a href="../html/personal.html">会员中心</a></li>
        <li></li>
        <li><a href="javascript:;">帮助中心</a></li>
        <li></li>
        <li><a href="javascript:;">在线客服</a></li>
        <li></li>
        <li><a href="javascript:;"><i class="iconfont icon-shouji"></i> 手机版</a></li>
      </ul>
    </div>
  </header>
  <!-- 导航栏 -->
  <nav>
    <div class="w">
      <h1 class="logo">
        <a href="javascript:;">
          小兔鲜儿
        </a>
      </h1>
      <ul>
        <li><a href="../html/index.html">首页</a></li>
        <li><a href="../html/classify.html">居家</a></li>
        <li><a href="javascript:;">美食</a></li>
        <li><a href="javascript:;">服饰</a></li>
        <li><a href="javascript:;">母婴</a></li>
        <li><a href="javascript:;">个护</a></li>
        <li><a href="javascript:;">严选</a></li>
        <li><a href="javascript:;">数码</a></li>
        <li><a href="javascript:;">运动</a></li>
        <li><a href="javascript:;">杂项</a></li>
      </ul>
      <div class="search">
        <i class="iconfont icon-search"></i>
        <input type="text" name="search" id="inp_search" placeholder="搜一搜">
      </div>
      <div class="shoppingCart">
        <i class="iconfont icon-i-shoping-car"></i>
        <span class="showNums"><i>0</i></span>
      </div>
    </div>
  </nav>
  <!-- 滚动才显示的导航栏开始 -->
  <nav class="slide_nav">
    <div class="w">
      <h1 class="logo">
        <a href="javascript:;">
          小兔鲜儿
        </a>
      </h1>
      <ul>
        <li><a href="../html/index.html">首页</a></li>
        <li><a href="javascript:;">居家</a></li>
        <li><a href="javascript:;">美食</a></li>
        <li><a href="javascript:;">服饰</a></li>
        <li><a href="javascript:;">母婴</a></li>
        <li><a href="javascript:;">个护</a></li>
        <li><a href="javascript:;">严选</a></li>
        <li><a href="javascript:;">数码</a></li>
        <li><a href="javascript:;">运动</a></li>
        <li><a href="javascript:;">杂项</a></li>
      </ul>
      <div class="search">
        <i class="iconfont icon-search"></i>
        <input type="text" name="search" id="inp_search" placeholder="搜一搜">
      </div>
      <div class="shoppingCart">
        <i class="iconfont icon-i-shoping-car"></i>
        <span class="showNums"><i>0</i></span>
      </div>
    </div>
  </nav>
  <!-- 滚动才显示的导航栏结束 -->
  <main>
    <!-- 版心 -->
    <div class="w">

      <!-- 左侧导航栏 -->
      <div class="nav">
        <h4 class="box">我的账户</h4>
        <div>
          <a href="" class="ture">个人中心</a>
          <a href="">消息通知</a>
          <a href="">个人信息</a>
          <a href="">安全设置</a>
          <a href="">地址管理</a>
          <a href="">我的积分</a>
          <a href="">我的足迹</a>
          <a href="">邀请有礼</a>
          <a href="">幸运抽奖</a>
        </div>
        <h4 class="box">交易管理</h4>
        <div>
          <a href="">我的订单</a>
          <a href="">优惠券</a>
          <a href="">礼品卡</a>
          <a href="">评价晒单</a>
          <a href="">售后服务</a>
        </div>
        <h4 class="box">我的收藏</h4>
        <div>
          <a href="">收藏的商品</a>
          <a href="">收藏的专题</a>
          <a href="">关注的品牌</a>
        </div>
        <h4 class="box">帮助中心</h4>
        <div>
          <a href="">帮助中心</a>
          <a href="">在线客服</a>
        </div>
      </div>

      <!-- 右侧个人信息 -->
      <div class="personal">

        <!-- 一、个人信息:头像、姓名   设置：会员中心、安全设置、地址设置 -->
        <div class=" profile">

          <!-- 1、个人信息 -->
          <div class="personal">
            <!-- 头衔 -->
            <div class="picture"><img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/avatar_1.png"
                alt=""></div>
            <!-- 姓名 -->
            <h1>沃恁蝶</h1>
          </div>

          <!-- 2、设置：会员中心、安全设置、地址设置 -->
          <div class="emplace">
            <!-- 3.1、会员中心 -->
            <a class="box1">
              <!-- 图标 -->
              <i class="iconfont icon-hehuoren-huiyuanzhongxin"></i>
              <!-- 文字 -->
              <span>会员中心</span>
            </a>
            <!-- 3.2、安全设置 -->
            <a class="box2">
              <i class="iconfont icon-shezhi"></i>
              <span>安全设置</span>
            </a>
            <!-- 3.1、地址管理 -->
            <a class="box3">
              <i class="iconfont icon-dizhiguanli"></i>
              <span>地址管理</span>
            </a>
          </div>
        </div>

        <!-- 二、我的收藏 -->
        <div class="collection">
          <!-- 1、顶部信息 -->
          <div class="header">
            <div><span>我的收藏</span></div>
            <a href="">
              <span>查看全部</span>
              <i class="iconfont icon-arrow-right"></i>
            </a>
          </div>
          <!-- 2、内容部分 -->
          <div class="content"></div>
        </div>

        <!-- 三、我的足迹 -->
        <div class="footmark">
          <!-- 1、顶部信息 -->
          <div class="header">
            <div><span>我的足迹</span></div>
            <a href="">
              <span>查看全部</span>
              <i class="iconfont icon-arrow-right"></i>
            </a>
          </div>
          <!-- 2、内容部分 -->
          <div class="content"></div>
        </div>
      </div>
  </main>
  <!-- 尾部关于我们 -->
  <footer>
    <!-- 尾部上面 -->
    <div class="footer_top w">
      <!-- 客户服务 -->
      <div class="kehu">
        <div>客户服务</div>
        <div>
          <span><i class="iconfont icon-a-4_huaban1"></i>在线客服</span>
          <span><i class="iconfont icon-question"></i>问题反馈</span>
        </div>
      </div>
      <!-- 关注我们 -->
      <div class="aboutus">
        <div>关注我们</div>
        <div>
          <span><i class="iconfont icon-weixin"></i>公众号</span>
          <span><i class="iconfont icon-xinlangweibo"></i>微博</span>
        </div>
      </div>
      <!-- 下载app -->
      <div class="download_app">
        <div>下载APP</div>
        <div>
          <span><img src="http://megasu.gitee.io/rabbit-vue3-ts/assets/qrcode.520695e8.jpg" alt=""></span>
          <div class="btn_download">
            <i>扫描二维码立马下载app</i>
            <button>下载页面</button>
          </div>
        </div>
        <div>
        </div>
      </div>
      <!-- 服务热线 -->
      <div class="rexian">
        <div>服务热线</div>
        <div>
          <div>400-0000-000</div>
          <div>周一至周日 8:00-18:00</div>
        </div>
      </div>
    </div>
    <!-- 尾部下面 -->
    <div class="footer_bottom">
      <div class="w">
        <div class="footerUp">
          <div><i class="iconfont icon-xiangzi"></i><span>价格亲民</span></div>
          <div><i class="iconfont icon-dianzan"></i><span>物流快捷</span></div>
          <div><i class="iconfont icon-huoche"></i><span>品质新鲜</span></div>
        </div>
        <div class="footerBottom">
          <ul>
            <li>关于我们</li>
            <li></li>
            <li>帮助中心</li>
            <li></li>
            <li>售后服务</li>
            <li></li>
            <li>配送与验收</li>
            <li></li>
            <li>商务合作</li>
            <li></li>
            <li>搜索推荐</li>
            <li></li>
            <li>友情链接</li>
          </ul>
          <div>CopyRight &copy; 小兔鲜儿</div>
        </div>
      </div>
    </div>
  </footer>
</body>

</html>